<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>辰楚教育-电话统计</title>
    <style>
    *{padding:0;margin: 0;}
    html{background: #f2f2f2;color: #333;}
    header {text-align: center;font-size: 28px;padding:35px 0;}
    section {width: 100%;margin-bottom: 50px;}
    .thead{width:94%;height: 80px;line-height: 80px;font-size: 20px;color:#fff;background: #5dcfc3;margin: 0 auto;text-align: center;border-bottom: 1px solid #e5e5e5;}
    .row{width: 94%;background: #fff;margin: 0 auto;}
    .row {border-bottom: 1px solid #f2f2f2;font-size: 0;}
    .row>div{display: inline-block;font-size: 16px;padding:20px 20px;text-align: left;box-sizing: border-box;}
    .row>div:nth-child(1){width:5%;}
    .row>div:nth-child(2){width:25%;}
    .row>div:nth-child(3){width:30%;}
    .row>div:nth-child(4){width:40%;}
    .nothing{width: 94%;background: #fff;line-height: 60px;height: 60px;text-align: center;margin: 0 auto;}
    </style>
</head>

<body>
    <header>辰楚教育-统计信息</header>
    <section>
		<div class="thead">成人教育</div>
        <div id="edu">
            <div class="row">
                <div>ID</div>
                <div>姓名</div>
                <div>电话</div>
                <div>填写日期</div>
            </div>
        </div>
        
    </section>
    <section>
    	<div class="thead">教师资格证</div>
    	<div id="teacher">
            <div class="row">
                <div>ID</div>
                <div>姓名</div>
                <div>电话</div>
                <div>填写日期</div>
            </div>
        </div>
    </section>
    <section>
    	<div class="thead">IT培训</div>
    	<div id="it">
            <div class="row">
                <div>ID</div>
                <div>姓名</div>
                <div>电话</div>
                <div>填写日期</div>
            </div>
        </div>
    </section>

    <script>
    window.onload = function(){
        getinfo();
    }
    function getinfo(){
        var eduArr = [],teacherArr = [],itArr = [];
        var ajax = new XMLHttpRequest();
        ajax.open('get','http://www.chenchuedu.com/info/getinfo.php');
        ajax.send();
        ajax.onreadystatechange = function () {
           if (ajax.readyState==4 &&ajax.status==200) {
        　　　　var data = JSON.parse(ajax.responseText);
                data = data.user;
                for (var i = 0; i < data.length; i++) {
                    if(data[i].type == 0){
                        eduArr.push(data[i]);
                    }else if(data[i].type == 1){
                        teacherArr.push(data[i])
                    }else if(data[i].type == 2){
                        itArr.push(data[i]);
                    }
                }
                var edu = document.getElementById('edu'),teacher = document.getElementById('teacher'),it = document.getElementById('it');
                tpl(eduArr,edu);
                tpl(teacherArr,teacher);
                tpl(itArr,it);
          　}
        }
    }
    function tpl(arr,wrap){
        var templete = '';
        if(arr.length>0){
            for (var i = 0; i < arr.length; i++) {
                templete += '<div class="row"><div>'+arr[i].id+'</div><div>'+arr[i].name+'</div><div>'+arr[i].tel+'</div><div>'+arr[i].time+'</div></div>';
            }
        }else{
            templete = "<div class='nothing'>暂无数据</div>";
        }
        
        wrap.innerHTML = templete;
    }
    
    </script>
</body>

</html>
